<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>canvas测试</title>


    <style>
      #myCanvas{
        /* width: 400px;
        height: 600px; */
        background-color: cadetblue;

        position:absolute;
	top:0;
	left:0;
      }
    </style>

  </head>

  <body>
    <canvas id="myCanvas">
    </canvas>
  </body>
</html>

<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Set line width
// ctx.lineWidth = 10;

// Wall
// ctx.strokeRect(100, 100, 150, 110);
// ctx.fillStyle = 'rgb(0, 0, 100)';
// ctx.fillRect(100, 100, 50, 100);
// Door
// ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
// ctx.closePath();
ctx.fill();
  </script>